<template>
	<view class="red-pkg">
		<view :class="[!chatItem.isRedRead ? 'is-read-pkg':'is-not-read-pkg']" @click="showPkg">
			<view class="red-con" :class="[userId == chatItem.sendId ? 'right-pkg':'left-pkg']">
				<view class="con-top">
					<view class="con-top-img">
						<image v-if="!chatItem.isRedRead" :src="require('@/static/img/msg/redpkg/01.svg')"></image>
						<image v-else :src="require('@/static/img/msg/redpkg/02.svg')"></image>
					</view>
					<view class="con-top-title">

						<!-- <view class="title-name">
							<text
								v-if="JSON.parse(chatItem.news).hbType == '3'">给{{JSON.parse(chatItem.news).appointUserName}}的红包</text>
							<text v-else>{{chatItem.sendNickname}}</text>
						</view> -->

						<view class="title-detail">
							<text
								v-if="JSON.parse(chatItem.news).hbType == '3'">给{{JSON.parse(chatItem.news).appointUserName}}的红包</text>
							<text
								v-else>{{JSON.parse(chatItem.news).title == '' ? '恭喜发财，大吉大利':JSON.parse(chatItem.news).title}}</text>
						</view>
					</view>

				</view>
				<view class="con-bottom-title">
					<view class="bottom-title">
						<text v-if="JSON.parse(chatItem.news).hbType == '2'">手气红包</text>
						<text v-else-if="JSON.parse(chatItem.news).hbType == '3'">专属红包</text>
						<text v-else>普通红包</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['chatItem'],
		data() {
			return {
				userId: uni.getStorageSync('userId')
			}
		},
		methods: {
			showPkg() {
				this.$emit('showRedPkg', this.chatItem)
			}
		}
	}
</script>

<style scoped lang="scss">
	.left-pkg {

		margin-left: 28rpx;
		position: relative;
		word-break: break-all;

		&::after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-top: 10rpx solid transparent;
			border-bottom: 10rpx solid transparent;
			position: absolute;
			left: -16rpx;
			top: 30rpx;
		}

		.con-top-img {
			image {
				margin: 0 20rpx 0 0;
			}
		}

		.bottom-title {
			text-align: right;
		}
	}

	.right-pkg {
		// background-color: #FCE1C3;
		background-color: #F89F3B;
		margin-right: 28rpx;
		position: relative;
		// word-break: break-all;

		.con-top {
			//flex-direction: row-reverse;
		}

		&::after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-top: 10rpx solid transparent;
			border-bottom: 10rpx solid transparent;
			border-left: 16rpx solid #F89F3B;
			position: absolute;
			right: -16rpx;
			top: 30rpx;
		}

		.con-top-img {
			image {
				margin: 0 20rpx 0 0;
			}
		}

		.title-name,
		.title-detail {
			text-align: left;
		}

	}

	.is-read-pkg {
		.left-pkg {
			background-color: #F89F3B;

			&::after {
				border-right: 16rpx solid #F89F3B;
			}
		}

		.right-pkg {
			background-color: #F89F3B;

			&::after {
				border-left: 16rpx solid #F89F3B;
			}
		}

	}

	.is-not-read-pkg {
		.left-pkg {
			background-color: #FCE1C3;

			&::after {
				border-right: 16rpx solid #FCE1C3;
			}
		}

		.right-pkg {
			background-color: #FCE1C3;

			&::after {
				border-left: 16rpx solid #FCE1C3;
			}
		}
	}

	.red-con {
		// width: 360rpx;
		// height: 130rpx;
		padding: 15rpx 15rpx;
		border-radius: 10rpx;

		.con-top {
			height: 70rpx;
			display: flex;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #fff;

			.con-top-img {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.con-top-title {
				width: 230rpx;

				text {
					// margin-left: 1rpx;
					font-size: 32rpx;
					color: #fff;

					word-break: break-all;
					/*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
					text-overflow: ellipsis;
					display: -webkit-box;
					/** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical;
					/** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 1;
					/** 显示的行数 **/
					overflow: hidden;
					/** 隐藏超出的内容 **/
				}

				.title-detail {
					height: 60rpx;
					line-height: 60rpx;
				}

				// .title-name {
				// 	height: 40rpx;
				// 	line-height: 40rpx;
				// }
			}
		}
	}

	.con-bottom-title {
		.bottom-title {
			text {
				font-size: 22rpx;
				color: #fff;
			}
		}

	}
</style>